import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { TrackWorkBenchTodoVO } from '../../types'
import './index.less'

const ToDoList: React.FC<{ workToDoMap: TrackWorkBenchTodoVO }> = ({ workToDoMap }) => {
  const navigate = useNavigate()
  const [list, setlist] = useState<{ label: string; value: string | number; url: string; key: string }[]>([])
  useEffect(() => {
    const todoListData = [
      {
        label: '回复意向单',
        value: 0,
        url: '/purchase/intentorder/list?customSearchType=1',
        key: 'waitReplyOrderNum',
      },
      { label: '确认账期', value: 0, url: '/purchase/order/list?customSearchType=1', key: 'waitConfirmBillNum' },
      { label: '维护生产计划', value: 0, url: '/purchase/order/list?customSearchType=2', key: 'productionplan' },
      { label: '提交合同', value: 0, url: '/purchase/contract/list?customSearchType=1', key: 'waitSubmitNum' },
      {
        label: '确认合同',
        value: 0,
        url: '/purchase/contract/list?customSearchType=2',
        key: 'pendingWaitTrackConfirmNum',
      },
      { label: '审核发货单', value: 0, url: '/purchase/delivery/list?customSearchType=1', key: 'waitAuditNum' },
    ]
    const filledList = todoListData.map((item) => ({
      ...item,
      value: workToDoMap && workToDoMap[item.key] != null ? workToDoMap[item.key] : 0,
    }))
    setlist(filledList)
  }, [workToDoMap])
  return (
    <div className="desk_mer_todolist_wrap">
      <div className="grid-title">跟单待办</div>
      <div className="grid-main-wrap">
        <div className="todo-card-list">
          {list?.map((item) => (
            <div className="todo-card" key={item.label} onClick={() => navigate(item.url)}>
              <div className="todo-card-title">{item.label}</div>
              <div className="todo-card-number">{item.value > 0 ? item.value : '-'}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default ToDoList
